<template>
<!--  岗位部门最大的盒子-->
  <div class="postall">
    <!--    头部最大盒子-->
    <el-row class="search">
      <div style="display: flex;line-height: 60px;">
        <!--        头部图片最大的盒子-->
        <div class="icons">
          <!--          权限图片-->
          <i class="iconfont icon-quanxian"></i>
        </div>
        <!--        头部标题-->
        <span class="icone">岗位管理</span>
      </div>
    </el-row>
    <!--    菜单页面上方最大盒子-->
    <!--    页面下方最大盒子-->
    <div class="bottom-all">
      <!--      下方上方按钮-->
      <div class="button-all">
        <!--            下方按钮大盒子-->
        <el-row class="iconfont-all">
          <!--              按钮小盒子-->
          <el-button class="iconfont-one1" type="primary" @click="insertMethod"><i class="iconfont icon-xinzeng"></i>新增</el-button>


        </el-row>
      </div>
      <!--      下方大表格-->
      <div>
        <el-table
            class="table-one"
            ref="multipleTableRef"
            :data="dataPosition"
            @selection-change="handleSelectionChange"
            :header-cell-style="{
                                fontWeight:'normal',
                                fontSize:'14px',
                                color:'#909399',
                                background:'#EFF3F8',
                              }"
        >
          <el-table-column label="岗位编号" property="positionId"/>
          <el-table-column label="部门" property="department.departmentName"  />
          <el-table-column label="岗位名称" property="positionTable.positionName"  />

          <el-table-column property="address4" label="创建时间"/>
          <el-table-column property="address5" label="操作">
            <template #default="scope">
            <div style="display: flex">
              <!--                      右下方表格里面的按钮-->
              <el-button class="table-buttom" type="primary" @click="rolePositionMethod(scope.row)">
                <el-icon><UserFilled /></el-icon>    权限修改</el-button>
              <el-button @click="updateMethod(scope.row)" type="primary"  plain><i class="iconfont icon-tianxie"></i>修改</el-button>

            </div>
            </template>
          </el-table-column>

        </el-table>
        <el-row justify="center">
          <el-col>
            <el-pagination
                v-model:currentPage="d.pageNo"
                v-model:page-size="d.pageSize"
                :page-sizes="[5,10, 20, 30, 40]"
                small="small"
                layout="total, sizes, prev, pager, next, jumper"
                :total="d.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"/>
          </el-col>
        </el-row>
      </div>

    </div>

  </div>

  <ComplieUserRole :ComplieRoleData="complieRoleData"></ComplieUserRole>
  <InsertPosition :DepartmentPositionData="departmentPositionData" ref="childRef"></InsertPosition>
</template>
<script lang="ts" setup>
// 上方搜索、重置按钮
import {
  Check,
  Delete,
  Edit,
  Message,
  Star,
} from '@element-plus/icons-vue'

import {onMounted, reactive, ref} from "vue";
import axios from "axios";
import ComplieUserRole from "../system/systemVue/ComplieUserRole.vue"
import InsertPosition from "../system/systemVue/InsertPosition.vue"

const d = reactive({
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //数据
  tableData: [],
});
const ALltableData=ref([])
const getTabelData=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableData.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableData = shu ;
}

const handleSizeChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelData();
}

const handleCurrentChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageNo = val;
  getTabelData();
}
//新增方法
const insertMethod =()=>{
  departmentPositionData.dialogVisible=true;
  departmentPositionData.transition=0;
  childRef.value.defaultMenu(null)

}
const updateMethod=(data)=>{
  console.log(data)
  departmentPositionData.dialogVisible=true;
  departmentPositionData.transition=1;
  departmentPositionData.fromData.yuanDepartmentId=data.depposId
  departmentPositionData.fromData.valueDepartment=data.department.departmentId
  departmentPositionData.fromData.position= data.positionTable
  childRef.value.defaultMenu(data.positionTable)
}
//新增对象
const departmentPositionData =reactive({
  transition:0,
  dialogVisible:false,
  fromData:{
    valueDepartment:"",
    yuanDepartmentId:"",
    position: {
      positionName:"",
      fatherId:"",
    },
    roleList:[],
    fatherId:"",
  },

  departmentPositionData:{},
  positionData:{},
  recursionPositionList:[] ,
  roleList:[],
  treeDefault:{
    positionId:1,
    positionName:""
  },
  departmentList:[] //department集合
})
const childRef =ref();
const complieRoleData=reactive({
  role:[],
  dialogVisible:false,
  userId:0,
  depposId:0,
  transition:0, //默认新增  1 修改
})
onMounted(()=>{
  axios.get("http://localhost:1688/department_con/alldepartments").then(data=>{
    departmentPositionData.departmentList =data.data.data;
  })
  axios.get("http://localhost:1688/position_con/recursionPosition").then(data=>{
    departmentPositionData.recursionPositionList =data.data.data;

  })
})
const rolePositionMethod =(data)=>{
  complieRoleData.dialogVisible =true;
  complieRoleData.transition =1;
  complieRoleData.depposId =data.depposId
  if(data.roleIdlist==null){
    console.log("没有给与默认权限")
    return
  }
  const roleIdArray =data.roleIdlist.split(",")
  const roleNameList = []
  roleIdArray.forEach((val,index)=>{
    const url = `http://localhost:1688/role/sysRole/${roleIdArray[index]}`
    axios.get(url).then((data)=>{
      complieRoleData.role.push(data.data.data.name);
    })
  })
  console.log(roleNameList)

}
// 下方表格
const parentBorder = ref(false)
const childBorder = ref(false)
const dataPosition= ref()
onMounted(()=>{
  //  #shujuyuan
  axios.get("http://localhost:1688/position_con/selectPosition").then(data=>{
    console.log(data.data.data)
    dataPosition.value =data.data.data;
    dataPosition.value.forEach((val,index)=>{
      const url = `http://localhost:1688/department_con/department/${val.departmentId}`
      axios.get(url).then(data=>{
        val.department= data.data.data
        dataPosition.value[index] =val;
      })
    })
    console.log(dataPosition)
  })
  axios.get("http://localhost:1688/position_con/recursionPosition").then(data=>{
    console.log(data)
  })
})
// 右下方表格全选
interface User {
  number:string
  date: string
  name: string
  address1: string
  address4: string
}
// 右下方表格数据
const tableData: User[] = [
  {
    number:'1',
    date: 'admin',
    name: '若依',
    address1: '研发部门',
    address4: '2022-10-18',
  },
  {
    number:'1',
    date: 'admin',
    name: '若依',
    address1: '研发部门',
    address4: '2022-10-18',
  },

]

// 表格里面的显示开关
const value4 = ref(true)

// 表格里面的开关
const value2 = ref(true)


// 右上方的用户状态
const value = ref('Option1')
// 右上方的用户状态
const options = [
  {
    value: 'Option1',
    label: '所有',
  },
  {
    value: 'Option2',
    label: '常用',
  },
  {
    value: 'Option3',
    label: '禁用',
  }
]

</script>

<style scoped>
@import url("../../../public/imgsY/icon/iconfont.css");
/*全局*/
*{
  padding: 0px;
  margin: 0px;
}
/*页面最大盒子*/
.system-all{
  height: 100%;
}
/*头部最大盒子*/
.search{
  border: 1px solid silver;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}
.el-row{
  padding: 5px 0px;
}

/deep/ .el-tabs__header {
  margin-bottom: 0px;
}
/*头部图片最大的盒子*/
.icons{
  width: 50px;
  height: 50px;
  background: dodgerblue;
  text-align: center;
  line-height: 50px;
  /*圆角*/
  border-radius: 40px;
  margin-left: 20px;
}
/*权限图片*/
.icon-quanxian {
  color: white;
  font-size: 24px;
  line-height: 50px;
}
/*头部标题*/
.icone{
  padding-left: 15px;
  line-height: 50px;
}
/*菜单页面上方最大盒子*/
.top-all{
  height: 60px;
  border: 1px solid silver;
}
.top-one{
  display: flex;
  height: 60px;
}
/*菜单名称上面的文字*/
.li-all{
  font-size: 14px;
  width: 265px;
  line-height: 60px;
  padding-left: 15px;
}
/*右上方input盒子*/
.input-all{
  height: 30px;
  border-radius: 4px;
  width: 180px;
  font-size: 14px;
  border: 1px solid silver;
}
/*菜单状态上面的文字*/
.li-all-one{
  font-size: 14px;
  width: 265px;
  height: 60px;
  padding-left: 15px;
  line-height: 60px;
}

/*右上方选择框*/
.m-2{
  width: 180px;
  height: 30px;
  margin-bottom: 5px;
  font-size: 14px;
}
/*上方盒子里面的搜索、重置按钮*/
.button-all{
  height: 60px;
  line-height: 60px;
}
/*页面下方最大盒子*/
.bottom-all{
  border: 1px solid silver;
  height: 540px;
}
/*右下方按钮最大盒子*/
.button-all{
  padding-left: 17px;
  border-bottom:1px solid silver ;
}
/*右下方按钮大盒子*/
.iconfont-all{
  padding-top: 10px;
}
/*按钮小盒子*/
.iconfont-one1{
  padding: 10px;
  background-color: #1C84C6;
}
/*表格里面的显示按钮*/
.button-one2{
  background-color: #1AB394;
  border-radius: 20px;
  padding: 15px;

}
/*按钮小盒子*/
.iconfont-one2{
  padding: 10px;
  background-color: #1AB394;
}
/*按钮小盒子*/
.iconfont-one3{
  padding: 10px;
  background-color: #F59DA6;
}
/*按钮小盒子*/
.iconfont-one4{
  padding: 10px;
  background-color: #F8AC59;
}
/*表格里面的---目录按钮*/
.button-one{
  padding: 15px;
}

/*表格里面的---菜单按钮*/
.button-one1{
  background-color: #1AB394;
  padding: 15px;
}
/*大表格的按钮*/
.table-buttom{
  padding: 10px;
}

#el-collapse-head-550 {
  font-size: 12px;
}


</style>